<template>
  <div class="box">
    <div class="box1">评分分类</div>
    <div class="text">还款登记</div>
    <div class="box2">
      <div class="text">新增催收</div>
      <div class="box3">
        <div>催收时间</div>
        <el-input v-model="value" />
        <div>催收方式</div>
        <el-select v-model="value" placeholder="请选择" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </div>
      <div class="box4">
        <div>催收内容</div>
        <el-input v-model="value1" />
      </div>
    </div>
    <div class="back">
      <el-row class="mb-4">
        <el-button @click="back">返回</el-button>
        <el-button type="primary">提交</el-button>
      </el-row>
    </div>
  </div>
</template>

<script setup >
import { useRouter } from "vue-router";
import { reactive } from "vue";
import { ref } from "vue"
var value = ref("");
var value1 = ref("");
var router=useRouter()
var back = () => {
  router.push("/home/credit/creditb");
};


const options = [
  {
    value: "电话催收",
    label: "电话催收",
  },
  {
    value: "上门催收",
    label: "上门催收",
  },
];
</script>

<style lang="scss" scoped>
.box1 {
  height: 30px;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(78, 171, 254);
  border-radius: 15px;
}
.text {
  margin: 10px;
  font-weight: 700;
}

.back {
  position: relative;
  height: 100%;
  .mb-4 {
    position: absolute;
    right: 50px;
    bottom: -400px;
  }
}
.box2 {
  margin-top: 20px;
  margin-left: 20px;
  .text {
    font-weight: 700;
    font-size: 12px;
  }
}
.box3 {
  display: flex;
  align-items: center;
  width: 80%;
  div {
    border: 1px solid #c0c4cc;
    width: 350px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #717376;
  }
  
}
.box4 {
  display: flex;
  align-items: center;
  div {
    border: 1px solid #c0c4cc;
    width: 350px;
    height: 60px;
    line-height: 40px;
    font-size: 12px;
    color: #717376;
  }
}
</style>